<template>
    <div class="PList">
        <div v-if="PDuckList">
            <van-row>
                <van-col span="12" v-for="item in PDuckList" :key="item.id">
                    <img @click="jump(item.id)" :src="item.img" alt="">
                    <div style="width: 99%; height: 1.5rem;overflow: hidden;">
                        <p class="p1">{{item.title}}</p>
                        <p class="p2">{{item.subtitle}}</p>
                        <span class="span" v-for="i in item.mark" :key="i.name">{{i.name}}</span>
                        <h4 class="h">${{item.price}}{{item.unit}}</h4>
                    </div>
                </van-col>
            </van-row>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        list: [Object, Array],
    },
    data() {
        return {
            PDuckList: 0,
        };
    },
    async created() {
        let arr = [].concat(this.list);
        let data = await this.$API.ProductList.GetProductListIds({
            ids: arr,
        });
        // console.log(data);
        if (data.code == 0) {
            this.PDuckList = data.data.list;
            // console.log(this.PDuckList);
        }
    },
    watch: {
        // async list() {
        //     let data = await this.$API.ProductList.GetProductListIds({
        //         ids: this.list,
        //     });
        //     console.log(data);
        //     if (data.code == 0) {
        //         this.PDuckList = data.data.list;
        //         console.log(this.PDuckList);
        //     }
        // },
    },
    methods: {
        jump(val) {
            // console.log(val); //跳转路由未定义
            this.$router.push("/productdetail" + val);
        },
    },
};
</script>

<style lang="scss" scoped>
.PList {
    padding: 0 0.18rem;
    .van-col {
        img {
            width: 3.4rem;
            height: 2.17rem;
            // height: 100%;
            
        }
        .p1 {
            font-size: 0.12rem;
            // width:;
        }
        .p2 {
            font-size: 0.12rem;
            color: gray;
        }
        span {
            display: inline-block;
            padding: 0.01rem;
            font-size: 0.14rem;
            color: rgb(195, 33, 33);
            border: 0.01rem solid red;
            margin-right: 0.04rem;
        }
        .h {
            color: red;
            font-size: 0.16rem;
        }
    }
}
</style>